<!-- 物流线路 - 表单编辑页面 -->
<template>
  <div class="page_rela_container" >
		<div class="scroll_auto flex_cell">

    <el-form ref="formEl" :model="formValue" label-width="160px" class="common-form-panel-div">

      <!-- 产品基础信息 -->
      <ex_header_spiler :title="$tt('label_warehouse_rental_fee_config')"></ex_header_spiler>

      <el-row>
        <el-col :span="1">
          <!-- 最大投保金额 -->
          <el-form-item :label="$tt('label_currency_kind')">
            <ex_super_input v-model="formValue.currencyType" type="select" enum="CurrencyTypeEnum" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="1">
          <el-form-item>
            <!-- 仓租时间段配置 -->
            <el-button type="text" @click="dialogFormVisible = true">{{ $tt('label_pms_tenant_time_cfg') }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="2">
          <!-- 仓租费用 -->
          <el-form-item :label="$tt('label_pms_tenant_price')">
            <el-table :data="formValue.wareHouseRentPrices" style="width: 940px;" border>
              <!--库龄范围（天 -->
              <el-table-column prop="period" :label="$tt('label_pms_storage_age')" min-width="100"
                align="center"></el-table-column>

              <!-- 单位 -->
              <el-table-column prop="unit" :label="$tt('label_pms_storate_unit')" min-width="100" align="center">
                <template slot-scope="scope">
                  {{ $tt('PmsPriceUnitEnum__YUAN_CBM_DAY') }}
                </template>
              </el-table-column>

              <!-- 销售单价 -->
              <el-table-column prop="price" :label="$tt('label_pms_sell_money')" min-width="100" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price"></el-input>
                </template>
              </el-table-column>

            </el-table>

            <div style="margin-top: 10px; color: #666; ">
              <i class="el-icon-warning"></i> {{ $tt('tip_range_Warehouse_rent_time_values') }}
            </div>

          </el-form-item>
        </el-col>
      </el-row>

      <!-- 产品费用信息 -->
      <ex_header_spiler :title="$tt('label_operat_fee_config')"></ex_header_spiler>

      <el-row>
        <el-col :span="1">
          <!-- 菜鸟供应商code -->
          <el-form-item :label="$tt('label_cainiao_supplier_code')">
            <el-input v-model="formValue.cainiaoSupplierCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item labelWidth="8px" style="color: #999;">
            <i class="el-icon-warning"></i> 用于区分非菜鸟的订单
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="1">
          <!--IML线下操作费 -->
          <el-form-item :label="$tt('label_IML_offline_operation_fee')">
            <el-input v-model="formValue.commonPrice">
              <template slot="append">{{ formValue.currencyType }}/单</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="1">
          <!-- 菜鸟操作费 一票一件 -->
          <el-form-item :label="$tt('label_cainiao_operation_fee_single')">
            <el-input v-model="formValue.cainiaoOneOnePrice">
              <template slot="append">{{ formValue.currencyType }}/单</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">
          <!-- 菜鸟操作费 一票多件 -->
          <el-form-item :label="$tt('label_cainiao_operation_fee_multiple')">
            <el-input v-model="formValue.cainiaoOneMorePrice">
              <template slot="append">{{ formValue.currencyType }}/单</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="1">
          <!-- 重货重量值 -->
          <el-form-item :label="$tt('label_heavy_cargo_weight_value')">
            <el-input v-model="formValue.heavyWeight">
              <template slot="append">Kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item labelWidth="8px" style="color: #999;">
            <i class="el-icon-warning"></i> {{ $tt('label_heavy_cargo_greater_than_weight') }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="1">
          <!-- 重货操作费 -->
          <el-form-item :label="$tt('label_heavy_cargo_operating_fee')">
            <el-input v-model="formValue.heavyPrice">
              <template slot="append">{{ formValue.currencyType }}/kg/单</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>


    <!-- 仓租时间段配置 -->
    <el-dialog :title="$tt('label_pms_tenant_time_cfg')" :visible.sync="dialogFormVisible" width="1000px">
      <el-form inline>

        <br />
        <!-- 时间段配置 -->
        <el-form-item :label="$tt('label_pms_time_period_cfg')" labelWidth="90px">
          <div style="width: 810px; display: flex; display: flex; flex-direction: row; flex-wrap: wrap;">

            <div v-for="item, index in weightArray" style="padding: 0px 6px 0px 6px; position: relative"
              @mouseover="item.showRemove = true" @mouseleave="item.showRemove = false" :key="'key_' + index">

              <input type="text" v-model="item.value"
                style="border: none; width: 40px; font-size: 14px; text-align: center; " />

              <i v-if="index != 0 && index != weightArray.length - 1" v-show="item.showRemove"
                @click="weightArray.splice(index, 1)" class="el-icon-remove"
                style="position: absolute; top: 0px; right: 0px; cursor: pointer; color: #d74343; "></i>
            </div>

            <div>
              <el-button icon="el-icon-plus"
                @click="weightArray.push(JSON.parse(JSON.stringify(weightArray[weightArray.length - 1])))"></el-button>
            </div>
          </div>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between; ">
        <span style="color: orangered; padding-left: 96px;">
          <i class="el-icon-warning"></i>
          <!-- 重新调整时间段后，当前的仓租费用配置会清零 -->
          {{ $tt('label_pms_tenant_re_config_tip') }}</span>
        <div>
          <!-- 取 消 -->
          <el-button @click="dialogFormVisible = false">{{ $tt('label_cancel') }}</el-button>
          <!-- 保 存 -->
          <el-button type="primary" @click="confirmWeight">{{ $tt('label_submit') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
    <div class="page_rela_bottom_area">
      <!-- 保存 -->
      <el-button type="primary" @click="submitForm()">{{ $tt('label_save') }}</el-button>
      <!-- 取消 -->
      <el-button @click="return_page_back()">{{ $tt('label_cancel') }}</el-button>
    </div>


  </div>
</template>
<script>

import router_params from '@/mixin/router_params';

export default {

  title: "label_price_cfg",
  components: {},
  mixins: [router_params],
  data() {

    return {

      "dialogFormVisible": false,

      "formValue": {
        "checkedSupplyProductIds": [],
        "disableSkuCategoryIds": [],
        "refCompany": [],
        "standardServicePrice": [],
        "additionalServicePrice": [],

        "wareHouseRentPrices": []
      },


      "weightForm": {
        "genType": "byNumber",
        "maxWeight": 100,
        "number": 20,
        "step": 0.5
      },

      "weightArray": [{
        "showRemove": false,
        "value": 0
      }, {
        "showRemove": false,
        "value": 30
      }, {
        "showRemove": false,
        "value": 90
      }, {
        "showRemove": false,
        "value": 180
      }, {
        "showRemove": false,
        "value": 360
      }],

      "editWeightTableRows": [],

      "standardServices": [],

      "additionalServices": [],

      "priceUnitMap": {}

    };
  },

  created() {
    let _this = this
    _this.iniDefaultConfigs()
  },

  mounted() {

  },
  methods: {

    // 加载默认常量信息
    iniDefaultConfigs() {
      let _this = this
      this.$ajax({
        url: '/wms-api/base/WmsPriceConfigRpc/getConfig.json',
        success: (res) => {
          _this.formValue = res.data
        }
      });

      _this.$ajax({
        url: '/wms-api/base/WmsPriceConfigRpc/getPriceUnitMap.json',
        success: (res) => {
          if (res && res.data) {
            _this.priceUnitMap = res.data
          }
        }
      });
    },


    submitForm() {

      let _this = this

      this['$refs']['formEl'].validate((valid) => {

        if (valid) {
          this.$ajax({
            url: '/wms-api/base/WmsPriceConfigRpc/update.json',
            type: 'json',
            data: _this.formValue,
            success: (responseData) => {
              this.$message({
                showClose: true,
                message: 'tip_submit_success',
                type: 'success'
              })

              // this.return_emit(null, "reload")
              // this.return_page_back()

            }
          });
        } else {
          return false
        }
      });
    },

    showPriceUnitDesc(currencyCode, unit) {

      if (!unit) {
        if (currencyCode == 'CNY') {
          return '元'
        }
        return this.$tt('CurrencyTypeEnum__' + currencyCode)
      }

      if (currencyCode == 'CNY') {
        return unit
      }

      let tmp = unit.indexOf('元')
      if (tmp == -1) {
        return unit
      }

      let unitDesc = this.$tt('CurrencyTypeEnum__' + currencyCode)

      return unitDesc + unit.substring(1)

    },


    confirmWeight() {

      let editWeightTableRows = []

      if (this.weightArray[this.weightArray.length - 1].value == -1) {
        this.weightArray.splice(this.weightArray.length - 1, 1)
      }

      for (let i = 0; i < this.weightArray.length; i++) {

        let e = this.weightArray[i].value

        let isNum = this.$isNumber(e)

        if (!isNum) {
          this.$message({
            'type': 'error',
            'message': e + '不是数字'
          })
          return
        }

        if (i == 0) {
          continue;
        }

        let tableHead = this.weightArray[i - 1].value + '-' + this.weightArray[i].value

        editWeightTableRows.push({
          'startDay': this.weightArray[i - 1].value,
          'endDay': this.weightArray[i].value,
          'period': this.weightArray[i - 1].value + '-' + this.weightArray[i].value,
          'price': 100,
          'unit': '元/立方米/天'
        })

        if (i == this.weightArray.length - 1) {
          editWeightTableRows.push({
            'startDay': this.weightArray[i].value,
            'endDay': -1,
            'period': '>' + this.weightArray[i].value,
            'price': 100,
            'unit': '元/立方米/天'
          })
        }
      }

      this.dialogFormVisible = false

      this.formValue.wareHouseRentPrices = editWeightTableRows

    }

  }
};

</script>
<style>
.product-line-limit-div,
.product-line-limit-div-2 {
  display: flex;
}


.product-line-limit-div .product-line-limit-col {
  width: 220px;
  text-align: center;
  margin-right: 10px;
}

.product-line-limit-div-2 div {
  width: 300px;
  /*text-align: center;*/
  margin-right: 10px;
}

.price-cal-div-row {
  display: flex;
}

.price-cal-div-row .price-cal-col {
  width: 120px;
  text-align: center;
}

.price-cal-div-row div {
  margin-right: 8px;
  text-align: center;
}
</style>
